<template>
  <el-container style="height: 100vh; overflow: hidden;">
    <!-- 1. 顶部导航栏（Header） -->
    <el-header height="60px" class="header">
      <div class="logo">
        <i class="fa fa-line-chart"></i>
        <span>吉林油田公司科学技术奖网评系统</span>
      </div>
      <!-- 用户信息下拉 -->
      <div class="user-info">
<!--        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像">-->
        <span>{{ currentUser }}</span>
        <!-- 修改: 使用 Element UI 的 dropdown 组件 -->
        <el-dropdown @command="handleUserMenuCommand" class="user-dropdown">
          <span class="el-dropdown-link">
            <i class="fa fa-angle-down" style="margin-left: 5px;"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
            <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <!-- 2. 左侧菜单（Aside） -->
      <el-aside width="200px" class="aside">
        <!-- 菜单默认选中当前路由 -->
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#ffffff"
            @select="handleMenuSelect"
            router
        >
          <!-- 仪表盘 -->
          <el-menu-item index="/dashboard">
            <i class="fa fa-dashboard"></i>
            <span slot="title">仪表盘</span>
          </el-menu-item>

          <!-- 专家管理（子菜单） -->
          <el-submenu index="expert-management">
            <template slot="title">
              <i class="fa fa-users"></i>
              <span>专家管理</span>
            </template>
            <el-menu-item index="/expert-list">专家列表</el-menu-item>
            <el-menu-item index="/judge-management">评委管理</el-menu-item>
          </el-submenu>

          <!-- 项目管理（子菜单） -->
<!--          <el-submenu index="project-management">
            <template slot="title">
              <i class="fa fa-folder-open"></i>
              <span>项目管理</span>
            </template>
            <el-menu-item index="/app/project-list">项目列表</el-menu-item>
            <el-menu-item index="/app/project-allocation">项目分配</el-menu-item>
          </el-submenu>-->
          <el-menu-item index="/project-allocation">
            <i class="fa fa-pencil-square-o"></i>
            <span slot="title">评委分配</span>
          </el-menu-item>

          <!-- 统计分析 -->
          <el-menu-item index="/statistics">
            <i class="fa fa-bar-chart"></i>
            <span slot="title">统计分析</span>
          </el-menu-item>

          <!-- 系统设置（子菜单） -->
          <el-submenu index="system-settings">
            <template slot="title">
              <i class="fa fa-cog"></i>
              <span>系统设置</span>
            </template>
            <el-menu-item index="/review-time-setting">评审时间设置</el-menu-item>
            <el-menu-item index="/system-parameters">系统参数</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 3. 主内容区（Main）：渲染当前二级页面 -->
      <el-main class="main">
        <router-view/>  <!-- 路由出口：当前选中的二级页面在这里渲染 -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { removeToken } from '@/utils/auth' // 引入移除token的工具函数

export default {
  data() {
    return {
      currentUser: '管理员', // 当前登录用户
      currentUserRole: 'admin' // 用户角色（admin/expert）
    }
  },
  methods: {
    // 菜单选中事件（路由已自动跳转，可额外处理逻辑）
    handleMenuSelect(key) {
      console.log('当前选中菜单路由：', key)
    },
    // 用户下拉菜单命令处理
    handleUserMenuCommand(command) {
      switch (command) {
        case 'profile':
          this.$message.info('个人中心功能待实现')
          break
        case 'changePwd':
          this.$message.info('修改密码功能待实现')
          break
        case 'logout':
          this.handleLogout()
          break
      }
    },
    // 退出登录
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除token并跳转到登录页
        removeToken()
        this.$message.success('退出登录成功！')
        // 跳转到登录页面
        this.$router.push('/login')
      }).catch(() => {
        this.$message.info('已取消退出')
      })
    }
  }
}
</script>

<style scoped>
/* 顶部导航栏样式 */
.header {
  background-color: #165DFF;
  color: white;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid #475669;
}

.logo i {
  font-size: 24px;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-info img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

/* 左侧菜单样式 */
.aside {
  background-color: #304156;
  color: #fff;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

/* 左侧菜单图标与文字间距 */
.el-menu-item i,
.el-submenu__title i {
  margin-right: 5px !important; /* 原间距基础上增加5px，默认通常是10px左右 */
}

/* 主内容区样式 */
.main {
  padding: 20px;
  background-color: #f2f3f5;
  /* 关键：计算主内容区高度 = 全屏高度 - 顶部导航高度（60px） */
  height: calc(100vh - 60px);
  /* 仅主内容区超出时显示垂直滚动条 */
  overflow-y: auto;
  /* 可选：避免水平滚动（若内容不超出宽度） */
  overflow-x: hidden;
}

/* 下拉菜单样式 */
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
</style>